﻿{include file="public/header"/}
<script src="{__PUBLIC_PATH}/common/js/jquery.js?v={$version}"></script>
<script src="{__PUBLIC_PATH}/admin/pcf/global.js?v={$version}"></script>
</head>
<body>
<style type="text/css" media="screen">
.layui-table-cell {height:30px!important;}
</style>
<div class="layui-fluid" id="LAY-component-layer-list">
    <div class="layui-card">
        <div class="layui-card-body table-tool-mini">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                    <a href="{:url('/channel.adposition/index')}" class="layui-btn layui-btn-primary input-btn-back">
                    <i class="layui-icon layui-icon-left"></i></a>
                    <button data-type="add" data-id="{$id}" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增广告</button>
                    <button data-type="batch_del" data-url="{:url('/channel.adposition/batch_del')}?ad=true" class="layui-btn layui-btn-danger icon-btn">
                    <i class="layui-icon"></i>批量删除</button>
                    </div>
                </div>
            </div>
            <table id="tablelist" lay-filter="tablelist"></table>
        </div>
    </div>
</div>
<script type="text/html" id="tableStateUser">
    <input type="checkbox" name="status" data-id="{{d.id}}" value="{{d.status}}" lay-filter="status" lay-skin="switch" lay-text="是|否" {{d.status==1 ? 'checked':''}}/>
</script>
<script type="text/html" id="tableBarUser">
    <a class="layui-btn layui-btn-primary layui-btn-sm" data-id="{{d.id}}" data-type="edit">修改</a>
    <a class="layui-btn layui-btn-sm" href="javascript:void(0);" onclick="copyToClipBoard({{d.id}})">标签调用</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" data-title="{{d.title}}" data-id="{{d.id}}" data-type="del">删除</a>
</script>
{include file="public/footer"/}
<script>
    layui.use(['layer', 'form', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var pid = "{$id}";
        // 渲染表格
        var insTb = table.render({
            elem: '#tablelist',
            url: "{:url('/channel.adposition/ad_index')}",
            where: {id:pid},
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type:'checkbox'},
                {field:'id',title:'ID',width:60},
                {field: 'litpic', title: '广告大图',width:100,align:'center',templet: function(data){
                    return '<a href="javascript:void(0);" onclick=BigImages("'+data.litpic+'")><image style="max-width:30px;max-height:30px;" src="'+data.litpic+'"/></a>';
                }},
                {field: 'title', title: '广告标题',templet: function(data){
                    return '<font style="color:'+data.bgcolor+'">'+data.title+'</font>';
                }},
                {field: 'links', title: '广告链接'},
                {field: 'status',templet: '#tableStateUser', title: '状态',width: 120,align: 'center'},
                {field: 'add_time', title: '添加时间',width: 180,align: 'center'},
                {title: '排序',align: 'center',templet: function (d) {
                    if(d.sort_order){
                       var html = "<input type='text' size='4' data-id='"+d.id+"' value='"+d.sort_order+"' id='sort_order' class='layui-input' style='height:28px;'/>";
                    }else{
                       var html = ""+d.sort_order+""; 
                    }
                    return html;
                }, width: 80},
                
                {align: 'center', toolbar: '#tableBarUser', title: '操作', width:250}
            ]]
        });

        $(document).on("click","#LAY-component-layer-list .layui-btn",function(){
          var type = $(this).data('type');
          active[type] && active[type].call(this);
        });

        //触发事件
        var active = {
            add: function(){
                var obj = this;
                var id = $(obj).attr('data-id');                
                layer.open({
                    type: 2,
                    title: '新增广告',
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    area: ['100%', '100%'],
                    content: '{:url("/channel.adposition/ad_add")}?id='+id
                });
            },
            edit: function(){
                var obj = this;
                var id = $(obj).attr('data-id');
                layer.open({
                    type: 2,
                    title: '编辑广告',
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    area: ['100%', '100%'],
                    content: '{:url("/channel.adposition/ad_edit")}?id='+id
                });
            },
            del: function(){
                var obj = this;
                var ntitle = $(obj).attr('data-title');
                var id = $(obj).attr('data-id');
                layer.msg('确定要删除“' + ntitle + '”吗？', {
                    btnAlign: 'c',
                    time: 0,
                    btn: ['确定', '取消'],
                    yes: function(index, layero){
                        layer.close(index);
                        $.get("{:url('/channel.adposition/del')}?ad=true", {id: id}, function (res) {
                            layer.closeAll('loading');
                            if (res.status) {
                                layer.msg(res.msg, {icon: 1,time:1000});
                                insTb.reload({}, 'data');
                            } else {
                                layer.msg(res.msg, {icon: 2,time:1000});
                            }
                        }, 'json');
                    }
                });
            },
            batch_del: function(){
                var checkRows = table.checkStatus('tablelist');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 2,time:1000});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                batch_del(this, ids);
            }
        };
        
        //开启关闭
        form.on('switch(status)', function(){
            if ($(this).val() == 0){
                $(this).val(1);
            }else{
                $(this).val(0);
            }
            var dataid = $(this).attr('data-id');
            var pcfurl = '{:url("/index/changeTableVal")}';
            changeTableVal('ad','id',dataid,'status',this,pcfurl,'channel.adposition/index');
        });

        // 监听排序
        $(document).on("change","#LAY-component-layer-list #sort_order",function(){
            var dataid = $(this).attr('data-id');
            var pcfurl = '{:url("/index/changeTableVal")}';
            changeTableVal('ad','id',dataid,'sort_order',this,pcfurl);
            self.window.location.reload();
        })
    });
    // 代码调用js
    function copyToClipBoard(id) {
        var adstr = "{gzpcf:ad aid='" + id + "'}\r\n<a href='{$"+"field.links}' {$"+"field.target}>\r\n<img src='{$"+"field.litpic}' alt='{$"+"field.title}' />\r\n</a>\r\n{/gzpcf:ad";
        var contentdiv = '<div class="dialog_content" style="margin:0px;padding:0px;"><dl style="padding:10px 30px;line-height:30px"><dd>标签 ad 调用:</dd>'
        contentdiv += '<textarea rows="4" cols="60" style="width:400px;height:80px;">' + adstr + '}</textarea>'
        contentdiv += '<dd style="border-top:dotted 1px #E7E7E7;color:#F60;">请将对应标签代码复制并粘贴到对应模板文件中！</dd></dl></div>'
        parent.layer.open({
            title: '代码调用',
            type: 1,
            skin: 'layui-layer-demo',
            area: ['480px', '240px'],
            content: contentdiv
        });
    }
</script>
</body>
</html>